<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script type="text/javascript" src="/dist/echarts.min.js"></script>
		<title>demo</title>
	</head>
	<body>
        <style>
            .echarts_wrap {
                display: flex;flex-wrap: wrap;
            }
            .echarts {
                width: 450px;height: 450px;
            }
        </style>
        <div class="echarts_wrap">
            <div id="line" class="echarts"></div>
            <div id="bar" class="echarts"></div>
            <div id="pie" class="echarts"></div>
            <div id="gauge" class="echarts"></div>
        </div>
        <script>
            // 折线图
            echarts.init(document.getElementById('line')).setOption({ // eslint-disable-line
                title: {
                    text: 'Line Chart'
                },
                legend: {
                    show: true
                },
                grid: {
                    top: 50,
                    right: 0,
                    bottom: 30,
                    left: 30
                },
                tooltip: {},
                xAxis: {},
                yAxis: {},
                series: {
                    type: 'line',
                    name: '出生率',
                    data: [22, 33, 44, 55],
                    smooth: true
                }
            });

            // 柱状图
            echarts.init(document.getElementById('bar')).setOption({ // eslint-disable-line
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            });

            // 饼图
            echarts.init(document.getElementById('pie')).setOption({ // eslint-disable-line
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 335, name: '直接访问' },
                            { value: 310, name: '邮件营销' },
                            { value: 234, name: '联盟广告' },
                            { value: 135, name: '视频广告' },
                            { value: 1548, name: '搜索引擎' }
                        ]
                    }
                ]
            });

            // 仪表盘
            echarts.init(document.getElementById('gauge')).setOption({ // eslint-disable-line
                tooltip: {
                    formatter: "{a} <br/>{c} {b}"
                },
                series: {
                    name: '倾斜',
                    type: 'gauge',
                    center: ['50%', '50%'],
                    radius: '100%', // 显示大小
                    min: -180,
                    max: 180,
                    startAngle: 225, // 开始角度 - 默认值
                    endAngle: -45, // 结束角度 - 默认值
                    splitNumber: 6,
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: { // 坐标轴小标记
                        length: 12, // 属性length控制线长
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: { // 分隔线
                        length: 20, // 属性length控制线长
                        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 5
                    },
                    title: {
                        show: true,
                        offsetCenter: [0, '-50%'] // 数据 name 距离中心的偏移量
                    },
                    detail: {
                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        formatter: '{value}°',
                        padding: [0, 0, -120, 0],
                        fontSize: 16
                    },
                    data: [
                        {
                            value: 30,
                            name: '倾角'
                        }
                    ]
                }
            });
        </script>
	</body>
</html>